<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<style>
		.ui-widget {
			font-size:13px; 
		}
	</style>
	<script>
	
		function mostraDivPJ() {
			document.getElementById("pf").style.display = "none";
			document.getElementById("pj").style.display = "inline";
			document.getElementById("tabelapj").style.display = "inline";
			document.getElementById("tabelapf").style.display = "none";
		}
		function mostraDivPF() {
			document.getElementById("pf").style.display = "inline";
			document.getElementById("pj").style.display = "none";
			document.getElementById("tabelapj").style.display = "none";
			document.getElementById("tabelapf").style.display = "inline";
		}
		
		function mostraDiv(id) {
			if (id == 1) {
				mostraDivPJ();
			} else if (id == 2) {
				mostraDivPF();
			}
		}
	</script>
</ui:define>
	
	<ui:define name="pageName">Consultar Fornecedor</ui:define>
	
	<ui:define name="content">
		<div style="margin-left:15%;float:left;width:70%">
			<p:selectOneRadio id="option" onchange="mostraDiv(this.value)">
				<f:selectItem itemLabel="Pessoa Jurídica" itemValue="1" />
				<f:selectItem itemLabel="Pessoa Física" itemValue="2"/>
			</p:selectOneRadio>			
			
			<div id="pj">
				<h:panelGrid columns="3">
					<h:outputText value="Código:"/>
					<h:outputText value="Razão social"/>
					<h:outputText value="CNPJ"/>
					
					<h:inputText style="width:100px;"/>
					<h:inputText style="width:200px;"/>
					<h:inputText style="width:150px;"/>
				</h:panelGrid>
			</div>			
			
			<div id="pf">
				<h:panelGrid columns="3" rendered="false">
					<h:outputText value="Código:"/>
					<h:outputText value="Nome"/>
					<h:outputText value="CPF"/>
					
					<h:inputText style="width:100px;"/>
					<h:inputText style="width:200px;"/>
					<h:inputText style="width:150px;"/>
				</h:panelGrid>
			</div>
			
	
			<div style="width:74%;padding-top:10px;text-align:right;">
				<p:commandButton value="Consultar" style="height:28px;"/>
				<p:commandButton value="Novo" style="height:28px;" action="/views/fornecedor/formFornecedor.xhtml?faces-redirect=true"/>
				<p:commandButton value="Limpar" style="height:28px;"/>
			</div>	
			
			<div style="padding-top:10px;">
				<div id="tabelapj">
					<p:dataTable style="width:700px"  var="fornecedor" >  
				        <p:column headerText="Código" width="100">  
				            <h:outputText value="#{fornecedor.id}" />  
				        </p:column>  
				  
				        <p:column headerText="Nome fantasia">  
				            <h:outputText value="#{fornecedor.nome}" />  
				        </p:column> 
				        
				        <p:column headerText="Cargo" width="120">  
				            <h:outputText value="#{fornecedor.cnpj}" />  
				        </p:column>   
				        
				        <p:column headerText="Contato" width="120">  
				            <h:outputText value="#{fornecedor.contato}" />  
				        </p:column> 	
			  	  </p:dataTable>
				</div>
				
		  	  <div id="tabelapf">
			  	  <p:dataTable style="width:700px"  var="fornecedor" rendered="false" >  
				        <p:column headerText="Código" width="100">  
				            <h:outputText value="#{fornecedor.id}" />  
				        </p:column>  
				  
				        <p:column headerText="Nome">  
				            <h:outputText value="#{fornecedor.nome}" />  
				        </p:column> 
				        
				        <p:column headerText="CPF" width="120">  
				            <h:outputText value="#{fornecedor.cpf}" />  
				        </p:column>   
				        
				        <p:column headerText="Telefone" width="120">  
				            <h:outputText value="#{fornecedor.telefone}" />  
				        </p:column> 	
			  	  </p:dataTable>
			
		  	  </div>
		  	  </div>
		</div>				 
	</ui:define>

</ui:composition>